<template>
  <el-row class="mx__20 px-20 bg-white">
    <el-col class="current-content-style">
      <el-row class="py-20">
        <el-col>
          <el-row type="flex" justify="left" :gutter="0">
            <!-- <el-select style="width: 200px" v-model="waterTypeName" placeholder="请选择水表类型">
              <el-option label="机械表" value="机械表"> </el-option>
              <el-option label="智能表" value="智能表"> </el-option>
            </el-select> -->

            <el-input placeholder="水表型号" v-model="waterModel" style="width: 200px"></el-input>
            <el-button type="primary" @click="searchhandle">查询</el-button>
            <el-button plain type="primary" @click="$router.push('/home/waterqualityadd')">新增</el-button>
            <download-excel
              class="export-excel-wrapper px-10"
              :data="tableData"
              :fields="json_fields"
              :header="title"
              name="水表类型表.xls"
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <el-button plain type="info">导出</el-button>
            </download-excel>
            <el-button plain type="success" @click="getWaterTypeListFn">重置</el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-table
            stripe
            :data="tableData"
            style="width: 100%"
            :header-row-class-name="
              ({ row, rowIndex }) => {
                if (rowIndex === 0) return 'table-header-bg'
              }
            "
          >
            <el-table-column prop="waterSupplier" label="水表供应商"> </el-table-column>
            <el-table-column prop="waterModel" label="水表型号"> </el-table-column>
            <el-table-column prop="waterTypeName" label="水表类型"> </el-table-column>
            <el-table-column prop="waterMaxMeter" label="最大计量(吨)"> </el-table-column>
            <el-table-column prop="waterDiameter" label="水表管径(mm)"> </el-table-column>
            <el-table-column label="操作" width="150">
              <template v-slot="scoped">
                <i
                  @click="
                    $router.push({ path: '/home/waterquality_type_detail', query: { id: scoped.row.waterTypeId } })
                  "
                  class="text-20 curser-pointer text-primary mr-20 el-icon-s-comment"
                ></i>
                <i
                  @click="deleteWaterMeter(scoped.row.waterTypeId)"
                  class="text-20 text-danger curser-pointer mr-20 el-icon-delete"
                ></i>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row class="my-20" style="text-align: right">
        <el-col :span="24">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { getWaterTypeListPage, deleteWaterType } from './../config/api'
// 水表类型管理
export default {
  data() {
    return {
      pageSizes: [5, 10, 15, 20],
      pageSize: 5,
      total: 0,
      currentPage: 1,
      waterModel: '',
      // waterTypeName: '',
      tableData: [],
      title: '水表类型表',
      json_fields: {
        水表供应商: 'waterSupplier',
        水表型号: 'waterModel',
        水表类型: 'waterTypeName',
        最大计量: 'waterMaxMeter',
        水表管径: 'waterDiameter',
        水表图片: 'waterImg'
      }
    }
  },
  created() {
    this.getWaterTypeListFn()
  },
  methods: {
    // 查询
    searchhandle() {
      getWaterTypeListPage({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        waterModel: this.waterModel
        // waterTypeName: this.waterTypeName
      }).then(res => {
        // console.log(res)
        if (res.code === 200) {
          this.tableData = res.data.list
          this.total = res.data.total
        }
        this.waterModel = ''
      })
    },
    // 删除
    deleteWaterMeter(id) {
      console.log(id)
      deleteWaterType({ waterTypeId: id }).then(res => {
        if (res.code === 200) {
          this.tableData.length === 1 && this.currentPage--
          this.currentPage === 0 && (this.currentPage = 1)
          this.getWaterTypeListFn()
        }
      })
    },
    // 获取水表类型数据
    getWaterTypeListFn() {
      getWaterTypeListPage({ pageNum: this.currentPage, pageSize: this.pageSize }).then(res => {
        // console.log(res)
        if (res.code === 200) {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      })
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.getWaterTypeListFn()
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.getWaterTypeListFn()
    }
    // waterTypeId
  }
}
</script>

<style scoped>
/* /deep/ .table-header-bg > th {
  background-color: rgba(233, 182, 226, 0.534) !important;
} */
</style>
